<template>
	<!-- Grid 容器 -->
	<div class="image-grid">
		<!-- 每个格子项 -->
		<div class="grid-item" v-for="(item, index) in traininfoImgs" :key="index">
			<el-image
				:initial-index="index"
				class="responsive-image"
				:src="item"
				:preview-src-list="traininfoImgs"
			>
			</el-image>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const traininfoImgs = ref([
	'/api/static/yolo/traininfo/confusion_matrix.png',
	'/api/static/yolo/traininfo/confusion_matrix_normalized.png',
	'/api/static/yolo/traininfo/F1_curve.png',
	'/api/static/yolo/traininfo/labels.jpg',
	'/api/static/yolo/traininfo/labels_correlogram.jpg',
	'/api/static/yolo/traininfo/P_curve.png',
	'/api/static/yolo/traininfo/PR_curve.png',
	'/api/static/yolo/traininfo/R_curve.png',
	'/api/static/yolo/traininfo/results.png',
]);
</script>
<style scoped lang="scss">
/* Grid 容器样式 */
.image-grid {
	column-count: 4;
	column-gap: 20px;
	padding: 20px;
}

/* 单个格子项 */
.grid-item {
	display: inline-block;
	width: 100%;
	margin-bottom: 10px;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(75, 123, 234, 0.5);
	transition: all 0.3s ease;
	border: 1px solid #ccc;
	&:hover{
		box-shadow: 0 8px 16px rgba(75, 123, 234, 0.7);
	}
}

/* 图片自适应样式 */
.responsive-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;

}

/* 响应式处理 */
@media (max-width: 992px) {
	.image-grid {
		column-count: 3;
	}
}

@media (max-width: 768px) {
	.image-grid {
		column-count: 2;
	}
}

@media (max-width: 480px) {
	.image-grid {
		column-count: 1;
	}
}
</style>
